import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Flex } from 'antd-mobile';
import { Grid } from 'antd-mobile';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
import "./MyAsset.css"
import "../../config.js"
import axios from "axios"

const genre = ['收益明细', '交易记录']
const icon = [require('../../imgs/detail.png'), require('../../imgs/record.png')]
const routes = ['#/terran/myAssetDetail','#/terran/myAssetRecord']
var incomeCount=0;

const data = Array.from(new Array(2)).map((_val, i) => ({
    icon: icon[i],
    text: genre[i],
    route: routes[i],
}));

var user_fund_data = [];

export default class MyAsset extends Component {
    constructor(props){
        super(props);
        this.state={
            user_fund_data:[],
        }
        var getPhoneNum=document.cookie.split('=')[1]
        axios.get(global.routes.database+'/getUserFund',{
            params:{
                phoneNum:getPhoneNum
            }
        }).then((res)=>{
            this.setState({
                user_fund_data:res.data.Data
            });
            incomeCount=0;
            for(var i=0;i<res.data.Data.length;i++){
                incomeCount+=res.data.Data[i].holding_income;
            }
            var p=document.getElementById('income');
            p.innerHTML=incomeCount.toFixed(2);
        })
    }

    render() {
        return (
            <div className="myAsset-div">
                <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/myAfterLogin'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                        style={{position:"relative"}}
                    >我的资产</NavBar>
                </div>

                <div className="flex-container" style={{height:'34vh'}}>
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>总金额（元）</div></Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '42px' }}>360.28</div></Flex.Item>
                    </Flex>
                    <WhiteSpace size="lg" />
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>昨日收益</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>持有收益</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>累计收益</div></Flex.Item>
                    </Flex>
                    <Flex>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '20px' }}>0</div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '20px' }}><p id='income' style={{margin:'0px'}}>0</p></div></Flex.Item>
                        <Flex.Item><div style={{ textAlign: 'center', fontSize: '20px' }}>25.98</div></Flex.Item>
                    </Flex>
                </div>

                <WingBlank size="lg">
                    <Grid data={data} columnNum={2} onClick={_el => console.log(_el)} itemStyle={{ height: '60px' }}
                        renderItem={dataItem => (
                            <div onClick={() => {window.location.href = dataItem.route}}>
                                <img src={dataItem.icon} style={{ width: '24px', height: '24px', float: 'left' }} alt="" />
                                <div style={{ fontSize: '18px' }}>
                                    <span>{dataItem.text}</span>
                                </div>
                            </div>
                        )} />
                </WingBlank>

                {
                    this.state.user_fund_data.map((item,index)=>{
                    if(item.holding_income>=0){
                        return(
                        <div>
                            <WingBlank size="lg" style={{height:'10vh',marginTop:'1vh'}}>
                                <Card>
                                    <Card.Header
                                        title={item.fundName}
                                        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                        thumbStyle={{ height: '20px' }}
                                    />
                                    <Card.Body style={{padding:'0px'}}>
                                        <div className="flex-container" style={{margin:'0px',height:'8vh'}}>
                                            <Flex>
                                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>金额</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>持有收益</div></Flex.Item>
                                            </Flex>
                                            <Flex>
                                                <Flex.Item><div style={{ textAlign: 'center' }}>{(item.hands*item.price).toFixed(2)}</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+0</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: 'red'}}>{(item.holding_income).toFixed(2)}</div></Flex.Item>
                                            </Flex>
                                        </div>
                                    </Card.Body>
                                </Card>
                            </WingBlank>
                            <br />
                            <br />
                        </div>
                        )
                    }else{
                        return(
                        <div>
                            <WingBlank size="lg" style={{height:'10vh'}}>
                                <Card>
                                    <Card.Header
                                        title={item.fundName}
                                        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                        thumbStyle={{ height: '20px' }}
                                    />
                                    <Card.Body style={{padding:'0px'}}>
                                        <div className="flex-container" style={{margin:'0px',height:'8vh'}}>
                                            <Flex>
                                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>金额</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>昨日收益</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999' }}>持有收益</div></Flex.Item>
                                            </Flex>
                                            <Flex>
                                                <Flex.Item><div style={{ textAlign: 'center' }}>{(item.hands*item.price).toFixed(2)}</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: 'red' }}>+0</div></Flex.Item>
                                                <Flex.Item><div style={{ textAlign: 'center', color: 'green'}}>{(item.holding_income).toFixed(2)}</div></Flex.Item>
                                            </Flex>
                                        </div>
                                    </Card.Body>
                                </Card>
                            </WingBlank>
                            <br />
                            <br />
                        </div>
                        )
                    }
                    })
                }
            </div>
        );
    }
}